<template>
	<div>
		<home-header></home-header>
		<home-swiper :swiperList="swiperList"></home-swiper>
		<home-icons :iconList="iconList"></home-icons>
		<HomeHotlist></HomeHotlist>
		<HomeGuess :recommendList="recommendList"></HomeGuess>
		<HomeWeekend :weekendList="weekendList"></HomeWeekend>
	</div>
</template>

<script>
	
	
	import HomeHeader from './pages/Header.vue'
	import HomeSwiper from './pages/Swiper.vue'
	import HomeIcons from './pages/Icons.vue'
	import HomeHotlist from './pages/HotList.vue'
	import HomeGuess from './pages/Guess.vue'
	import HomeWeekend from './pages/Weekend.vue'
	import { mapState } from 'Vuex'
	export default{
		data(){
			return {
				swiperList:[],
				iconList:[],
				recommendList:[],
				weekendList:[],
				changCity:''
			}
		},
		computed:{
			...mapState(['city'])
		},
		components:{
			HomeHeader,
			HomeSwiper,
			HomeIcons,
			HomeHotlist,
			HomeGuess,
			HomeWeekend
		},
		methods:{
//			getHttp(){
//				this.$http.get("/api/data.json").then((res)=>{
//					const data = res.data.data;
//					this.swiperList = data.swiperList;
//				})
//				
//			},
			getContent(){
				this.$http.get("/api/HomeList.json").then((res)=>{
					const data = res.data.data.HomeCityList;
//					console.log(data);
					data.forEach((item,index)=>{
						if(item.city == this.city){
							this.iconList = item.iconList;
							this.recommendList = item.recommendList;
							this.swiperList = item.swiperList;
							this.weekendList = item.weekendList;
							console.log(item);
						}
					})
				})
				
			}
		},
		mounted(){
//			this.getHttp();
			this.getContent();
			this.changCity = this.city;
		},
		activated(){
			if(this.changCity != this.city){
				this.getContent();
			}
			this.changCity = this.city;
		}
	}
	
	
</script>
